[broadway] Clean up js side surface handling

* Always calculate the context, don't store in surface.
* Store the toplevel element (frame or canvas) for easy access.
* Always use visibility hidden rathern than display none to hide windows,
  as this means we can always rely on dom positioning info.

diff --git a/gdk/broadway/broadway.js b/gdk/broadway/broadway.js
index 502e6644ad8f62a19dcdd1b559d365f4607d9b2e..844d01514bbbd2ada1eb22805e059fedf5e9c9a2 100644 (file)
--- a/gdk/broadway/broadway.js
+++ b/gdk/broadway/broadway.js
@@ -169,7 +169,8 @@ function flushSurface(surface)
 {
     var commands = surface.drawQueue;
     surface.queue = [];
-    var context = surface.context;
+    var context = surface.canvas.getContext("2d");
+    context.globalCompositeOperation = "source-over";
     var i = 0;
     for (i = 0; i < commands.length; i++) {
        var cmd = commands[i];
@@ -230,11 +231,9 @@ function ensureSurfaceInDocument(surface, doc)
        oldCanvas.parentNode.removeChild(oldCanvas);
 
        surface.canvas = canvas;
+       if (surface.toplevelElement == oldCanvas)
+           surface.toplevelElement = canvas;
        surface.document = doc;
-
-       var context = canvas.getContext("2d");
-       context.globalCompositeOperation = "source-over";
-       surface.context = context;
     }
 }
 
@@ -375,31 +374,22 @@ function cmdCreateSurface(id, x, y, width, height, isTemp)
     surface.document = document;
     surface.transientToplevel = null;
     surface.frame = null;
-    stackingOrder.push(surface);
 
     var canvas = document.createElement("canvas");
     canvas.width = width;
     canvas.height = height;
     canvas.surface = surface;
     surface.canvas = canvas;
+    var toplevelElement;
 
     if (useToplevelWindows || isTemp) {
-       canvas.style["position"] = "absolute";
-       canvas.style["left"] = "0px";
-       canvas.style["top"] = "0px";
-       canvas.style["display"] = "none";
+       toplevelElement = canvas;
        document.body.appendChild(canvas);
     } else {
        var frame = document.createElement("div");
        frame.frameFor = surface;
-       frame.style["position"] = "absolute";
-       frame.style["left"] = "0px";
-       frame.style["top"] = "0px";
-       frame.style["display"] = "inline";
-       // We hide the frame with visibility rather than display none
-       // so getFrameOffset still works with hidden windows
-       frame.style["visibility"] = "hidden";
        frame.className = "frame-window";
+       surface.frame = frame;
 
        var button = document.createElement("center");
        var X = document.createTextNode("X");
@@ -411,11 +401,11 @@ function cmdCreateSurface(id, x, y, width, height, isTemp)
        contents.className = "frame-contents";
        frame.appendChild(contents);
 
-       document.body.appendChild(frame);
-       contents.appendChild(canvas);
        canvas.style["display"] = "block";
+       contents.appendChild(canvas);
 
-       surface.frame = frame;
+       toplevelElement = frame;
+       document.body.appendChild(frame);
 
        surface.x = 100 + positionIndex * 10;
        surface.y = 100 + positionIndex * 10;
@@ -423,11 +413,20 @@ function cmdCreateSurface(id, x, y, width, height, isTemp)
        sendInput ("w", [surface.id, surface.x, surface.y, surface.width, surface.height]);
     }
 
-    var context = canvas.getContext("2d");
-    context.globalCompositeOperation = "source-over";
-    surface.context = context;
+    surface.toplevelElement = toplevelElement;
+    toplevelElement.style["position"] = "absolute";
+    /* This positioning isn't strictly right for apps in another topwindow,
+     * but that will be fixed up when showing. */
+    toplevelElement.style["left"] = surface.x + "px";
+    toplevelElement.style["top"] = surface.y + "px";
+    toplevelElement.style["display"] = "inline";
+
+    /* We hide the frame with visibility rather than display none
+     * so getFrameOffset still works with hidden windows. */
+    toplevelElement.style["visibility"] = "hidden";
 
     surfaces[id] = surface;
+    stackingOrder.push(surface);
 }
 
 function cmdShowSurface(id)
@@ -438,7 +437,6 @@ function cmdShowSurface(id)
        return;
     surface.visible = true;
 
-    var element = surface.canvas;
     var xOffset = surface.x;
     var yOffset = surface.y;
 
@@ -472,22 +470,17 @@ function cmdShowSurface(id)
        }
 
        ensureSurfaceInDocument(surface, doc);
-       element = surface.canvas;
     } else {
        if (surface.frame) {
-           element = surface.frame;
            var offset = getFrameOffset(surface);
            xOffset -= offset.x;
            yOffset -= offset.y;
        }
     }
 
-    element.style["position"] = "absolute";
-    element.style["left"] = xOffset + "px";
-    element.style["top"] = yOffset + "px";
-    element.style["display"] = "inline";
-    if (surface.frame)
-       surface.frame.style["visibility"] = "visible";
+    surface.toplevelElement.style["left"] = xOffset + "px";
+    surface.toplevelElement.style["top"] = yOffset + "px";
+    surface.toplevelElement.style["visibility"] = "visible";
 
     restackWindows();
 }
@@ -500,14 +493,9 @@ function cmdHideSurface(id)
        return;
     surface.visible = false;
 
-    var element = surface.canvas;
-    if (surface.frame)
-       element = surface.frame;
+    var element = surface.toplevelElement;
 
-    if (surface.frame)
-       surface.frame.style["visibility"] = "hidden";
-    else
-       element.style["display"] = "none";
+    element.style["visibility"] = "hidden";
 
     // Import the canvas into the main document
     ensureSurfaceInDocument(surface, document);
@@ -533,15 +521,9 @@ function cmdSetTransientFor(id, parentId)
 }
 
 function restackWindows() {
-    if (useToplevelWindows)
-       return;
-
     for (var i = 0; i < stackingOrder.length; i++) {
        var surface = stackingOrder[i];
-       if (surface.frame)
-           surface.frame.style.zIndex = i;
-       else
-           surface.canvas.style.zIndex = i;
+       surface.toplevelElement.style.zIndex = i;
     }
 }
 
@@ -1134,7 +1116,6 @@ function connect()
        var ws = new WebSocket(loc, "broadway");
        ws.onopen = function() {
            inputSocket = ws;
-           
            var w, h;
            if (useToplevelWindows) {
                w = window.screen.width;
@@ -1142,7 +1123,7 @@ function connect()
            } else {
                w = window.innerWidth;
                h = window.innerHeight;
-               window.onresize = function(ev) { 
+               window.onresize = function(ev) {
                    var w, h;
                    w = window.innerWidth;
                    h = window.innerHeight;